import React from 'react';

// Constants for repeated class strings
const containerClasses = "min-h-screen flex flex-col items-center justify-center bg-white dark:bg-zinc-800 p-4";
const textColorDark = "dark:text-white";
const textColorSecondary = "text-zinc-600 dark:text-zinc-300";

const NotFoundPage = () => {
    return (
        <div className={containerClasses}>
            <img 
                src="https://placehold.co/600x400" 
                alt="404 Not Found" 
                className="max-w-full h-auto rounded-lg shadow-lg"
            />
            <h1 className={`text-3xl font-bold text-zinc-800 ${textColorDark} mt-6`}>
                404 - Page Not Found
            </h1>
            <p className={`${textColorSecondary} mt-2`}>
                Sorry, the page you are looking for could not be found.
            </p>
            <a 
                href="/" 
                className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            >
                Go Home
            </a>
        </div>
    );
};

export default NotFoundPage;
